<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2022/8/7
  Time: 11:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.jsp">登录</a> <span style="color: red">${register_msg}</span>
    </div>
    <form id="reg-form" action="register" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">

                   <%-- 1. 图片的地址可以写本地的地址，也可以网络上的地址。
                    2. 当然也可以写一个servlet的地址，只要这个servlet把图片的二进制数据通过输出流输出出来就可以了--%>
                    <img id="img" src="validateCode">
                    <a href="javascript:changeImg()" id="changeImg">看不清？</a>
                </td>
            </tr>

            <script>
                //更换验证码
                function changeImg(){

                    //1. 找到图片标签，重新设置src属性的值，这样就能重新发起请求获取新的验证码图片下来显示了
                    // 浏览器会有缓存，如果发现这次请求的地址和刚才请求的地址一样，那么浏览器就不发请求了。
                    // 所以为了欺骗浏览器，必须要在这里带上一点参数，目的就是为了和前面的src的值不一样。
                    // 至于参数的名是什么无所谓，参数的值必须是一个动态变化的值！
                    document.getElementById("img").src="validateCode?a="+new Date();

                }
            </script>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
</body>
</html>